<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no" />
        <title>订单确认</title>
        <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
        <link rel="stylesheet" type="text/css" href="../../css/common.css" />
        <link type="text/css"  href="../../css/mui.picker.css" rel="stylesheet" />
        <link  type="text/css" href="../../css/mui.poppicker.css" rel="stylesheet" />
        <!-- <link rel="stylesheet" type="text/css" href="../../css/style.css" /> -->
        <style>
            body{
                font-size: 14px;
            }
            footer.aui-nav{
                z-index: 99999;
            }
            header.aui-bar{
                background: #fff;
            }
            .aui-title{
                color:#000;
            }
            .aui-nav .aui-bar-tab .active .aui-iconfont, .aui-nav .aui-bar-tab .active p{
                color:#327afa !important;
            }
            .aui-tab-nav li.active {
                color: #327afa;
                border-bottom: 2px #327afa solid;
            }
            .aui-bar .aui-iconfont{
                color:#000;
            }
            .send{
                font-size: 12px !important;
            }
            .aui-list-view:after{
                border:none;
            }
            .aui-switch.aui-switch-success:checked {
                border-color: #327afa;
                box-shadow: #327afa 0 0 0 26px inset;
                background-color: #327afa;
            }
            .menuRgiht{
                float: right;
                margin-right: 20px;
            }
            input[type="text"]{
                border:none;
                margin: 0;
                width: 70%;
                padding: 0;
            }
            textarea{
                margin: 0;
                height: 80px;
                overflow-y: auto;
                border:none;
                padding: 0;
            }
            .payMethod>span {
                display: block;
                border-radius: 5px;
                background: #ff3333;
                color: #fff;
                padding: 5px 10px;
                margin-left: 15px;
                float: right;

            }
            span.payDelivery{
                background: #d9d9d9;
            }
            span.payText{
                background: #fff;
                color: #000;
                float: left;
                padding: 5px 0px;
                margin: 0;
            }

            .pickerToTop{
                position: fixed;
                bottom: 0;
                -webkit-transform: translateY(395px);
                height:395px;
                overflow-y:auto; 
                -webkit-transition:  .5s;
                transition:  .5s;
                z-index: 999;
                width: 100%;
                text-align: center;
                background: #fff;
                width: 200%;
            }
            .toTopAnimate{
                -webkit-transform: translateY(00px);
            }

            .pickerToTop2{
                width: 100%;
                overflow: hidden;
                height: inherit;
            }
            .pay,.checkCard{
                float: left;
                width: 50%;
                position: relative;
            }
            .pickerToTop2{
                transition: 0.5s;
            }
            .showCar{
                -webkit-transform:translateX(-50%);
            }
            .checkCard .myBtn{
                background: none;
                color:#000;
            }
            .pickerToTop .aui-iconfont {
                position: absolute;
                left: 10px;
                top: 10px;
                font-size: 20px;
                color: #000;
                z-index: 9;
            }
            .pickerToTop .myBtn {
                position: fixed;
                bottom: 0;
                width: 50%;
            }
            .pickerToTop .aui-list-view-cell:not(:first-of-type) {
                text-align: left;
            }
            .pickerToTop ul li:not(:first-of-type) {
                font-size: 14px;
            }
            .payList li img {
                width: 25px;
                vertical-align: middle;
                margin-right: 5px;
            }
            .payList li.payActive:before {
                content: "\e645";
                font-family: "auiicon" !important;
                right: 20px;
                position: absolute;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                color: #ff3333;
                border: 1px solid #ff3333;
                line-height: 20px;
                text-align: center;
            }

            .result{
                display: none;
                padding: 15px;
                padding-top: 100px;
                background: #fff;
            }
            .aui-btn-info{
                border-color:#ff3333;
            }
            .aui-btn-info.aui-btn-outlined{
                color:#ff3333;
            }
            .spanOk{
                display: block;
                border-radius: 50%;
                width: 50px;
                height: 50px;
                background: #ff3333;
                position: relative;
                margin: 0 auto;
                margin-bottom: 10px;
            }
            .spanOk:before{
                position: absolute;
                content: "\e645";
                left: 26%;
                top:10%;
                color: #fff;
                font-size: 25px;
            }
            .ok{
                text-align: center;
                padding-bottom: 15px;
                margin-bottom: 15px;
            }
            .result .aui-btn{
                width: 45%;
                float: left;
                margin-top: 15px;
                margin-right: 10px;
                overflow: hidden;
            }
            .result .waring{
                font-size: 12px;
                color:#646464;
                overflow: hidden;
                margin-top: 15px;
                width: 100%;
            }
            .btns{
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <header class="aui-bar aui-bar-nav aui-border-b">
            <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
            <div class="aui-title">
                订单确认
            </div>
            <div class="aui-pull-right aui-iconfont send" tapmode onclick="openToTwo('addressList_win')">选择地址</div>
        </header>
        <div class="contain payContain">            
            <ul class="aui-list-view">
                <li class="aui-list-view-cell">
                    收货人:
                    <span>黄生</span>
                </li>
                <li class="aui-list-view-cell">
                    联系电话:
                    <span>123456789012</span>
                </li>
                <li class="aui-list-view-cell" id="showCityPicker3">
                    <a class="aui-arrow-right">
                        所在地区
                        <span class="menuRgiht" id="checkCity">广东省 湛江市 雷州市</span>
                    </a>
                </li>
                <li class="aui-list-view-cell">
                    这个是详细地址这个是详细地址这个是详细地址这个是详细地址这个是详细地址这个是详细地址
                </li>
            </ul>            
            <ul class="aui-list-view">
                <li class="aui-list-view-cell payMethod ">
                    <span class="payText">支付方式</span>
                    <span class="payDelivery">货到付款</span>
                    <span class="payOnline">在线支付</span>
                </li>
            </ul>           
            <ul class="aui-list-view">
                <li class="aui-list-view-cell aui-switch-body myBtn aui-text-center" tapmode onclick="showPickerPay()">
                    确认
                </li>
            </ul>
        </div>
        
        
        <div class="pickerToTop">
            <div class="pickerToTop2">
                <div class="pay">
                    <i class="aui-iconfont aui-icon-roundclose" tapmode onclick="hidePicker()"></i>
                    <ul class="aui-list-view ">
                        <li class="aui-list-view-cell"  >
                            付款详情
                        </li>
                        <li class="aui-list-view-cell" tapmode onclick="showCheckCard()">
                            <a class="aui-arrow-right">
                            支付方式
                            <span class="menuRgiht payMethod">支付宝支付</span>
                            </a>
                        </li>
                        <li class="aui-list-view-cell">
                            <a class="">
                            需付款
                            <span class="menuRgiht">￥6888.88</span>
                            </a>
                        </li>
                    </ul>
                    <div class="myBtn" tapmode onclick="comfirmPay()">确认付款</div>
                </div>
                <!-- 选择支付方式 -->
                <div class="checkCard">
                    <i class="aui-iconfont aui-icon-left" tapmode onclick="showCheckCardBack()"></i>
                    <ul class="aui-list-view payList" >
                        <li class="aui-list-view-cell"  >
                            付款详情
                        </li>
                        <li class="aui-list-view-cell payActive" tapmode onclick="checkCardFn(this)">
                            <img src="../../icon/AliPayIcon.png" >支付宝支付
                        </li>
                        <li class="aui-list-view-cell" tapmode onclick="checkCardFn(this)">
                            <img src="../../icon/CMBIcon.png" >招商银行储蓄卡（2130）
                        </li>
                        <li class="aui-list-view-cell" tapmode onclick="checkCardFn(this)">
                            <img src="../../icon/BOCIcon.png" >中国银行储蓄卡（6050）
                        </li>
                        <li class="aui-list-view-cell" tapmode onclick="checkCardFn(this)">
                            <img src="../../icon/ABCIcon.png" >中国农业银行储蓄卡（1480）
                        </li>
                    </ul>
                    <!-- <div class="myBtn aui-border-t btnAddCard" tapmode onclick="openToTwo('my/addCard')">+添加新卡付款</div> -->
                    <div class="myBtn aui-border-t btnAddCard" tapmode onclick="openToTwo('addCard');hidePicker()">+添加新卡付款</div> 
                </div>
            </div>
        </div>
        <!-- 控制影藏显示 支付成功提示-->
        <div class="result">
            <div class="ok aui-border-b">
                <span class="aui-iconfont aui-icon-check spanOk"></span>
                <p>支付成功</p>
            </div>
            <div class="resultTips">
                <h3>发货信息</h3>
                <p>我们将尽快安排发货，请买家保持手机通讯畅通，以便快递哥哥能第一时间联系到您。</p>
            </div>
            <div class="btns">
                <div class="aui-btn aui-btn-info aui-btn-block aui-btn-outlined" tapmode onclick="openToTwo('logisticsInfo')">
                查看订单</div>
                <div class="aui-btn aui-btn-info aui-btn-block aui-btn-outlined">
                去首页</div>
            </div>
            <div class="waring">
                <em style="color:#ff3333">＊</em>安全提醒：建材猫不会以任何理由要求您提供银行卡信息或支付额外费用，请谨防钓鱼链接或诈骗电话。
            </div>
        </div>
    </body>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/common.js"></script>
    <script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="../../script/city.data-3.js"></script>
    <script type="text/javascript" src="../../script/mui.js"></script>
    <script type="text/javascript">
        apiready = function() {
            api.parseTapmode();
            var mobile = api.pageParam.mobile;
            var header = $api.dom('header');
            //$api.fixStatusBar(header);
            api.setStatusBarStyle({
                  style : 'light'
            });
            
        }


        function checkCardFn(obj){
            $(obj).parent().find("li").removeClass("payActive");
            $(obj).addClass("payActive");
            $(".payMethod").text($(obj).text());
            showCheckCardBack();
        }
        // mui遮罩
        var mask = mui.createMask(hidePicker);
        // 选择支付方式
        function showPickerPay(){
            mask.show();
            $(".pickerToTop").addClass("toTopAnimate");
        }
        function setPayType(obj){
            $(".payType").text($(obj).text());
            hidePicker();
        }
        // 关闭遮罩
        function hidePicker(){
            $(".pickerToTop").removeClass("toTopAnimate");
            // 延迟0.5s为了不让效果向右下角收缩
            setTimeout(function(){
                $(".pickerToTop2").removeClass("showCar");
            },500);
            mask.myclose();
        }
        // 右滑选择银行卡
        function showCheckCard(){
            $(".pickerToTop2").addClass("showCar");
        }
        // 右滑选择银行卡
        function showCheckCardBack(){
            $(".pickerToTop2").removeClass("showCar");
        }
        // 支付成功
        function comfirmPay(){
            $(".payContain").css({"display":"none"});
            $(".result").css({"display":"block"});
            hidePicker();
        }
    </script>
</html>
